<template>
  <div class="user-update-test">
    <h2>用户更新功能测试</h2>
    
    <div class="test-section">
      <h3>测试用户更新（增强版）</h3>
      <el-form :model="testForm" label-width="120px">
        <el-form-item label="用户ID">
          <el-input v-model="testForm.id" placeholder="输入要更新的用户ID" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="testForm.realName" placeholder="输入真实姓名" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="testForm.email" placeholder="输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="testForm.mobile" placeholder="输入手机号" />
        </el-form-item>
        <el-form-item label="角色ID">
          <el-input v-model="testForm.roleIds" placeholder="输入角色ID，用逗号分隔" />
        </el-form-item>
        <el-form-item label="分组ID">
          <el-input v-model="testForm.groupIds" placeholder="输入分组ID，用逗号分隔" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="testForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testUpdateUser" :loading="loading">
            测试更新用户
          </el-button>
          <el-button @click="testGetUser">获取用户信息</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="result-section" v-if="result">
      <h3>测试结果</h3>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { userAPI } from '@/api/user'

const loading = ref(false)
const result = ref(null)

const testForm = reactive({
  id: '',
  realName: '',
  email: '',
  mobile: '',
  roleIds: '',
  groupIds: '',
  status: 1
})

// 测试更新用户
const testUpdateUser = async () => {
  if (!testForm.id) {
    ElMessage.error('请输入用户ID')
    return
  }

  loading.value = true
  try {
    // 准备请求数据
    const requestData = {
      id: parseInt(testForm.id),
      realName: testForm.realName || undefined,
      email: testForm.email || undefined,
      mobile: testForm.mobile || undefined,
      status: testForm.status,
      roleIds: testForm.roleIds ? testForm.roleIds.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id)) : [],
      groupIds: testForm.groupIds ? testForm.groupIds.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id)) : []
    }

    console.log('发送请求数据:', requestData)

    const response = await userAPI.updateUserWithRelations(requestData)
    result.value = response
    
    if (response.success) {
      ElMessage.success('用户更新成功')
    } else {
      ElMessage.error('用户更新失败: ' + (response.message || '未知错误'))
    }
  } catch (error) {
    console.error('更新用户失败:', error)
    result.value = { error: error.message }
    ElMessage.error('更新用户失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 测试获取用户信息
const testGetUser = async () => {
  if (!testForm.id) {
    ElMessage.error('请输入用户ID')
    return
  }

  loading.value = true
  try {
    const response = await userAPI.getUserById(parseInt(testForm.id))
    result.value = response
    
    if (response.success) {
      ElMessage.success('获取用户信息成功')
      
      // 填充表单
      const userVO = response.data || {}
      const user = userVO.user || userVO
      const roles = userVO.roles || []
      const groups = userVO.groups || []
      
      testForm.realName = user.realName || ''
      testForm.email = user.email || ''
      testForm.mobile = user.mobile || ''
      testForm.status = user.status || 1
      testForm.roleIds = roles.map(role => role.id).join(', ')
      testForm.groupIds = groups.map(group => group.id).join(', ')
    } else {
      ElMessage.error('获取用户信息失败: ' + (response.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    result.value = { error: error.message }
    ElMessage.error('获取用户信息失败: ' + error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.user-update-test {
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.result-section {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

pre {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>